<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title>立即注册</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.nav{
				width: 100%;
				height: 1.8rem;
				display: flex;
				position: fixed;
				align-items: center;
				top: 0;
				background: url(img/nav.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.nav img{
				position: absolute;
				height: 1rem;
				width: 0.6rem;
				margin-left: 1rem;
			}
			.nav p{
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 0.6rem;
				line-height: 1.8rem;
				color: white;
			}
			ul{
				width: 100%;
				height: auto;
				margin-top: 1.8rem!important;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			ul>li{
				width: 8.8rem;
				height: 1.8rem;
				border-bottom: 1px solid #e5e5e5;
				line-height: 1.8rem;
				margin-bottom: 0.3rem;
			}
			li>span{
				display: inline-block;
				width: 2rem;
			}
			.pj:nth-of-type(3) li input{
				width: 3.7rem;
				border-right: 1px solid black;
				margin-right: 0.5rem;
			}
			li>button{
				border: none;
				background: transparent;
				cursor: pointer;
				color:dimgrey;
			}
			.pj:nth-of-type(7) li{
				border: none;
				display: flex;
				align-items: center;
				color: dimgrey;
			}
			.pj:nth-of-type(8) li{
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.pj:nth-of-type(8) li button{
				width: 6rem;
				height: 1.5rem;
				border-radius:0.2rem ;
				background: #ff3333;
				color: white;
			}
			.pj{
				width: 100%;
				height: 1.8rem;
				display: flex;
				justify-content: center;
				line-height: 1.8rem;
			}
			
			.a{
				width: 0.5rem;
				height: 0.5rem;
				border: 1px solid transparent;
				background: #ff3333;
				margin-right: 0.8rem;
			}
			.b{
				width: 0.5rem;
				height: 0.5rem;
				border: 1px solid gray;
				background: #fff;
				margin-right: 0.8rem;
			}
		</style>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="box">
			 <div class="nav">
			 	<img src="img/fanhui@2x.png" >
			 	<p>
			 		注册
			 	</p>
			 </div>
			 <ul>
				 <div class="pj">
					 <li>
					 	<span>用户名</span><input type="text" placeholder="请输入您的昵称">
					 </li>
				 </div>
				<div class="pj">
					<li><span>手机号</span><input type="text" placeholder="请输入您的联系方式"></li>				 
				</div>
				<div class="pj">
					<li><span>验证码</span><input type="text" placeholder="输入验证码"> <button>获取验证码</button></li>				 
				</div>
				<div class="pj">
					<li><span>密码</span><input type="password" placeholder="请输入6-20位密码"></li>			 
				</div>
				<div class="pj">
					<li><span>确认密码</span><input type="password" placeholder="请再次输入密码"></li>			 
				</div>
				<div class="pj">
					<li><span>邀请码</span><input type="text" placeholder="输入邀请码(非必填)"></li>			 
				</div>
				<div class="pj">
					<li><span class="a"></span><p>我已阅读并同意《云安装服务协议》</p></li>
				</div>
				<div class="pj">
					<li><button>立即注册</button></li> 				 
				</div>
				
			</ul>
			<script type="text/javascript">
				$(function(){
					$("img").click(function(){
						history.back()
					})
					$(".a").click(function(){
						$(this).toggleClass("b")
					})
					
				})
				function TagName(tag){
						return document.getElementsByTagName(tag)
					}
					var btn=TagName("button")[0]
					var inp=TagName("input")[2]
					
				// 验证码数组
					
					var gg=["1","2","3","4","5","6","7","8","9","0",]
					var dd=["1","2","3","4","5","6","7","8","9","0",]
					var ee=["1","2","3","4","5","6","7","8","9","0",]
					var ff=["1","2","3","4","5","6","7","8","9","0",]
					var bb=["1","2","3","4","5","6","7","8","9","0",]
					var ab=["33","55","88","66","44",]
					var cc=["a","b","c","d","e","f",]
					
				// 定时器倒计时
					
					btn.onclick=function(){
						var gg1=Math.floor(Math.random()*gg.length)
						var ff1=Math.floor(Math.random()*ff.length)
						var ee1=Math.floor(Math.random()*ee.length)
						var dd1=Math.floor(Math.random()*dd.length)
						var aa1=Math.floor(Math.random()*ab.length)
						var bb1=Math.floor(Math.random()*bb.length)
						var cc1=Math.floor(Math.random()*cc.length)
						var a=30;
						function aa(){
							timer=setInterval(function(){
								 a--;
								  inp.value=a+"s"
								if(a<=0){
									 clearInterval(timer)
									 inp.value=bb[bb1]+cc[cc1]+ab[aa1]+dd[dd1]+ee[ee1]+ff[ff1]+gg[gg1]
								 }
							},1000)
						}
						aa();
					}
				
				
			</script>
			
		</div>
	</body>
</html>
